// ********************************************     第二屏   ***********************************************
// 三个点击按钮
(function () {
  let but1 = document.querySelector(".buttons .but1");
  let but2 = document.querySelector(".buttons .but2");
  let but3 = document.querySelector(".buttons .but3");
  let but4 = document.querySelector(".buttons .but4");

  but1.addEventListener("click", function () {
    window.location.href = "./index.html";
    // $(mainbox2).hide();
    // $(mainbox2).hide();
    // $(mainbox).show();
  });
  but2.addEventListener("click", function () {
    window.location.href = "./屏幕2.html";
    // location.reload();
    // $(mainbox).hide();
    // $(mainbox2).show();
    // $("<li><li>");
  });
  but3.addEventListener("click", function () {
    window.location.href = "./屏幕3.html";
  });
  but4.addEventListener("click", function () {
    window.location.href = "./屏幕4.html";
  });
})();

//图1
(function () {
  let myCharts = echarts.init(document.querySelector(".mainbox .bar3 .chart"));
  let colorList = [
    "#ff7f50",
    "#87cefa",
    "#da70d6",
    "#32cd32",
    "#6495ed",
    "#ff69b4",
    "#ba55d3",
    "#cd5c5c",
    "#ffa500",
    "#40e0d0",
    "#1e90ff",
    "#ff6347",
    "#7b68ee",
    "#d0648a",
    "#ffd700",
    "#ff7f50",
    "#87cefa",
    "#da70d6",
    "#32cd32",
    "#6495ed",
    "#ff69b4",
    "#ba55d3",
    "#cd5c5c",
    "#ffa500",
    "#40e0d0",
    "#1e90ff",
    "#ff6347",
    "#7b68ee",
    "#d0648a",
    "#ffd700",
    "#ff7f50",
    "#87cefa",
    "#da70d6",
    "#32cd32",
    "#6495ed",
    "#ff69b4",
    "#ba55d3",
    "#cd5c5c",
    "#ffa500",
    "#40e0d0",
    "#1e90ff",
    "#ff6347",
    "#7b68ee",
    "#d0648a",
    "#ffd700",
  ];
  let symbolSizeArr = [];
  let option = {
    tooltip: {},
    xAxis: {
      show: false,
    },
    yAxis: {
      show: false,
    },
    series: [
      {
        type: "graph",
        layout: "force",
        force: {
          repulsion: 65,
          edgeLength: 10,
        },
        label: {
          show: true,
          formatter: ["{title|{c}}", "{name|{b}}"].join("\n"),
          rich: {
            title: {
              fontSize: 14,
              color: "#fff",
              textAlign: "center",
            },
            name: {
              fontSize: 14,
              color: "#fff",
              textAlign: "center",
            },
          },
        },
        itemStyle: {
          color: function (params) {
            let a = params.dataIndex;
            if (a >= 6) {
              a = a - 6;
            }
            return colorList[a];
          },
        },
        symbolSize: function (value, params) {
          return symbolSizeArr[params.dataIndex];
        },
        draggable: true, //设置是否可拖动
        data: [
          {
            name: "数据挖掘",
            value: "",
          },
          {
            name: "数据分析",
            value: "",
          },
          {
            name: "数据开发",
            value: "",
          },
          {
            name: "数据架构",
            value: "",
          },
          {
            name: "数据仓库",
            value: "",
          },
          {
            name: "ETL工程师",
            value: "",
          },
          {
            name: "数据算法",
            value: "",
          },
          {
            name: "数据标注",
            value: "",
          },
          {
            name: "数据运营",
            value: "",
          },
          {
            name: "数据推送",
            value: "",
          },
          {
            name: "hadoop",
            value: "",
          },
          {
            name: "spark",
            value: "",
          },
          {
            name: "big data",
            value: "",
          },
          {
            name: "bi工程师",
            value: "",
          },
          {
            name: "flink",
            value: "",
          },
          {
            name: "python",
            value: "",
          },
          {
            name: "数据平台",
            value: "",
          },
          {
            name: "计算广告",
            value: "",
          },
          {
            name: "scala",
            value: "",
          },
          {
            name: "MapReduce",
            value: "",
          },
          {
            name: "kafka",
            value: "",
          },
          {
            name: "nosql",
            value: "",
          },
          {
            name: "streaming",
            value: "",
          },
          {
            name: "sql",
            value: "",
          },
          {
            name: "数据建模",
            value: "",
          },
          {
            name: "数据可视化",
            value: "",
          },
          {
            name: "hbaes",
            value: "",
          },
          {
            name: "数据湖",
            value: "",
          },
          {
            name: "MongoDB",
            value: "",
          },
        ],
      },
    ],
  };
  myCharts.setOption(option);
  window.addEventListener("resize", function () {
    myCharts.resize();
  });
})();
// 图2
(function () {
  //   异步加载

  let frequency = [];

  let qualification = [];
  $.ajax({
    type: "get",
    url: "http://192.168.2.232:31279/ruan/QuaPost",
    async: true,
    success: function (datas) {
      for (let i = 0; i < datas.length; i++) {
        frequency.push(datas[i].frequency);
        qualification.push(datas[i].qualification);
      }

      console.log(frequency);
      console.log(qualification);

      let myCharts = echarts.init(
        document.querySelector(".mainbox .bar4 .chart")
      );
      let option = {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          textStyle: {
            color: "#4c9bfd", // 图例文字颜色
            fontSize: 12,
          },
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "数据挖掘",
              "数据分析",
              "可视化",
              "数据算法",
              "数据开发",
              "python",
              "Java",
            ],
            axisLabel: {
              color: "#cccccc", // 文本颜色
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "#cccccc", // 文本颜色
            },
          },
        ],
        series: [
          {
            name: qualification[3],
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [729, 781, 1450, 347, 289, 1250, 726],
          },
          {
            name: qualification[2],
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(0, 221, 255)",
                },
                {
                  offset: 1,
                  color: "rgb(77, 119, 255)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [2917, 4913, 5893, 3917, 2952, 3952, 3712],
          },

          {
            name: qualification[1],
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 0, 135)",
                },
                {
                  offset: 1,
                  color: "rgb(135, 0, 157)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [180, 102, 231, 134, 190, 230, 120],
          },
          {
            name: qualification[0],
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 191, 0)",
                },
                {
                  offset: 1,
                  color: "rgb(224, 62, 76)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [18, 2, 0, 8, 1, 1, 1],
          },
        ],
      };
      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
  });
})();

// 兰宁格尔玫瑰图
//图四模块
(function () {
  //   异步加载
  let proportion = [];
  let post = [];
  let data = [];
  $.ajax({
    type: "get",
    url: "http://192.168.2.232:31279/ruan/PostFrequancy",
    async: true,
    success: function (datas) {
      for (let i = 0; i < datas.length; i++) {
        proportion.push(datas[i].proportion);
        post.push(datas[i].post);
        data.push({ value: proportion[i], name: post[i] });
      }

      let myCharts = echarts.init(
        document.querySelector(" .mainbox .line4 .chart")
      );
      let option = {
        color: [
          "#006cff",
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff",
          "#9fe6b8",
          "#32c5e9",
          "#1d9dff",
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: "0%",
          itemWidth: 10,
          itemHeight: 10,

          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12px",
          },
        },
        series: [
          {
            name: "大数据岗位热门城市分布",
            type: "pie",
            radius: ["10%", "70%"],
            center: ["50%", "50%"],
            roseType: "radius",
            // 图形的文字标签
            label: {
              fontSize: "10",
            },
            // 引导线调整
            labelLine: {
              // 连接扇形图线长
              length: 6,
              // 连接文字线长
              length2: 8,
            },

            itemStyle: {
              borderRadius: 5,
            },
            data: data,
          },
        ],
      };
      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
  });
})();
// 数字模块2
// (function () {
//   // 市场需求人数
//   let need = document.querySelector(".no-hd").querySelectorAll("li")[0];
//   // 市场供应人数
//   let supply = document.querySelector(".no-hd").querySelectorAll("li")[1];
//   // 市场需求人数2

//   function getRandomInt(min, max) {
//     min = Math.ceil(min);
//     max = Math.floor(max);
//     return Math.floor(Math.random() * (max - min + 1)) + min;
//   }

//   function needSum() {
//     need.innerHTML = parseInt(need.innerHTML) + getRandomInt(1, 10);
//   }
//   function supplySum() {
//     supply.innerHTML = parseInt(supply.innerHTML) + getRandomInt(1, 10);
//   }
//   setInterval(needSum, 1500);
//   setInterval(supplySum, 2000);
// })();

// 图三
(function () {
  let myCharts = echarts.init(document.querySelector(".line3 .chart"));
  let option = {
    color: ["#0FD64F", "#F7B708", "#ED5D5D", "#33e1ca"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "25",
      left: 90,
      right: 112,
      bottom: "-10",
      containLabel: false,
    },
    legend: {
      // orient：“horizontal”,//水平展示，不写默认水平展示
      orient: "horizontal",
      right: 100,
      top: 0,
      textStyle: {
        color: "#4c9bfd", // 图例文字颜色
      },
    },
    xAxis: [
      {
        type: "value",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        inverse: true, //是否是反向坐标轴
        axisTick: "none",
        axisLine: "none",
        axisLabel: {
          color: "#FFF",
          fontSize: "16",
          formatter: function (value) {
            const maxlength = 7;
            if (value.length > maxlength) {
              return value.substring(0, maxlength - 1) + "...";
            } else {
              return value;
            }
          },
        },
        data: [
          "数据分析",
          "数据挖掘",
          "数据开发",
          "可视化",
          "Hadoop",
          "数据采集",
          "ETL工程师",
          "kafka",
          "scala",
          "计算广告",
          "数据平台",
          "python",
          "flink",
          "bi工程师",
          "spark",
          "数据推送",
          "数据运营",
          "数据标注",
          "数据算法",
          "数据仓库",
          "数据架构",
          "NoSQL",
        ],
      },
      {
        type: "category",
        inverse: true,
        // inside: true,
        axisTick: "none",
        axisLine: "none",
        data: [
          2560, 1260, 1241, 808, 687, 987, 1575, 779, 654, 158, 841, 615, 789,
          1236, 3651, 251, 71, 2885, 541, 625, 847, 257,
        ],
        axisLabel: {
          formatter: function (value, i) {
            const arr = [`{a|${value}}`];
            return arr.join("");
          },
          rich: {
            a: {
              fontSize: 16,
              width: 48,
              height: 20,
              color: "#FFF",
              align: "center",
              // borderWidth: 1,
              // borderColor: 'red'
            },
            b: {
              fontSize: 16,
              width: 48,
              color: "#FFF",
              align: "center",
            },
          },
        },
      },
    ],
    // 滑动条
    dataZoom: [
      {
        // realtime : true,
        yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
        show: false, // 是否显示滑动条，不影响使用
        type: "slider", // 这个 dataZoom 组件是slider型
        startValue: 0, // 从头开始
        endValue: 4, // 一次性展示个数
      },
    ],
    series: [
      {
        name: "大专",
        type: "bar",
        stack: "学历",
        barWidth: 20,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(175, 235, 255, 0.2)",
        },
        data: [
          260, 126, 1241, 808, 687, 987, 155, 77, 65, 158, 841, 615, 89, 236,
          651, 251, 71, 288, 541, 625, 87, 257,
        ],
      },
      {
        name: "本科",
        type: "bar",
        stack: "学历",
        barWidth: 20,
        data: [
          2560, 1260, 1241, 808, 687, 987, 1575, 779, 654, 158, 841, 615, 789,
          1236, 3651, 251, 71, 2885, 541, 625, 847, 257,
        ],
      },
      {
        name: "研究生",
        type: "bar",
        stack: "学历",
        barWidth: 20,
        data: [
          2560, 1260, 2410, 8080, 687, 9870, 5750, 779, 654, 158, 841, 615, 789,
          1236, 3651, 2510, 71, 2885, 5410, 6250, 847, 257,
        ],
      },
      {
        name: "博士",
        type: "bar",
        stack: "学历",
        barWidth: 20,
        data: [
          560, 260, 241, 808, 687, 987, 575, 779, 654, 158, 841, 615, 789, 236,
          651, 251, 71, 885, 541, 625, 847, 257,
        ],
      },
      {
        name: "",
        type: "bar",
        barWidth: 20,
        barGap: "-100%",
      },
    ],
  };

  setInterval(function () {
    // 通过动态改变数据实现不停循环播放
    let y1 = option.yAxis[0].data,
      y2 = option.yAxis[1].data,
      complate = option.series[0].data,
      underHandling = option.series[1].data,
      notStarted = option.series[2].data;
    y1.push(y1.shift());
    y2.push(y2.shift());
    complate.push(complate.shift());
    underHandling.push(underHandling.shift());
    notStarted.push(notStarted.shift());
    myCharts.setOption(option);
    // 通过改变dataZoom属性实现播放
    // if (option.dataZoom[0].endValue === 7) {
    //     option.dataZoom[0].endValue = 6;
    //     option.dataZoom[0].startValue = 0;
    // } else {
    //     option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
    //     option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
    // };
    // myChart.setOption(option);
  }, 2000);
  myCharts.setOption(option);

  myCharts.setOption(option);

  window.addEventListener("resize", function () {
    myCharts.resize();
  });
})();

// 图五
(function () {
  //   异步加载
  let post = [];
  let frequency = [];
  $.ajax({
    type: "get",
    url: "http://192.168.2.232:31279/ruan/MaxPostNum",
    async: true,
    success: function (datas) {
      for (let i = 0; i < datas.length; i++) {
        post.push(datas[i].post);
        frequency.push(datas[i].frequency);
      }

      let myCharts = echarts.init(document.querySelector(".pie3 .chart"));

      // 2.指定配置项和数据
      let option = {
        color: ["#2f89cf"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // 修改图表的大小
        grid: {
          left: "0%",
          top: "10px",
          right: "-8",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: post,
            axisTick: {
              alignWithLabel: true,
            },
            // 修改刻度标签相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12",
            },
            // 不显示x坐标轴的样式
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // 修改刻度标签相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
            // y轴的像素像素改为了2像素
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2,
              },
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            // 修改柱子宽度
            barWidth: "35%",
            data: frequency,
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5,
            },
          },
        ],
      };
      // 3.把配置项给实例对象
      myCharts.setOption(option);

      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
  });
})();
// 图6
(function () {
  //   异步加载
  // 岗位量;
  let frequency = [];
  // 岗位名称;
  let post = [];
  let sum = 0;
  // 比例
  let proportion = [];
  $.ajax({
    type: "get",
    url: "http://192.168.2.232:31279/ruan/MaxPostNum ",
    async: true,
    success: function (datas) {
      for (let i = 0; i < datas.length; i++) {
        frequency.push(datas[i].frequency);
        post.push(datas[i].post);
        sum += +frequency[i];
      }
      for (let i = 0; i < datas.length; i++) {
        proportion.push((frequency[i] / sum) * 100);
        proportion[i] = proportion[i].toFixed(2);
      }
      let myCharts = echarts.init(document.querySelector(".cone .chart"));
      let xData = post;

      let data = frequency;
      let percent = proportion;
      //   let chart = this.$echarts.init(this.$refs.belongSituation)
      let star =
        "";
      let imgList = [];
      let iconData = [];
      data.forEach((item, index) => {
        imgList.push({
          coord: [index, item],
          symbolSize: [100, 50],
          symbolKeepAspect: true,
          symbolOffset: [-40, -185],
          symbol: "image://" + star,
        });
        iconData.push({
          value: item,
          symbolPosition: "end",
        });
      });
      // console.log(iconData)
      let option = {
        // backgroundColor: 'rgb(8,25,34)',
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(7,55,63,0.7)",
          borderColor: "rgba(7,55,63,0.7)",
          textStyle: {
            color: "#fff",
          },
          formatter: function (params) {
            return (
              params[0].marker + "" + params[0].name + ": " + params[0].value
            );
          },
        },
        grid: {
          bottom: "10%",
          right: 0,
          left: 0,
        },
        xAxis: {
          data: xData,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            name: "岗位缺口",
            type: "effectScatter",
            rippleEffect: {
              period: 1,
              scale: 2,
              brushType: "fill",
            },
            symbolSize: [100, 25],
            symbolOffset: [0, 10],
            z: 12,
            itemStyle: {
              normal: {
                color: "#14b1eb",
                opacity: 0.5,
              },
            },
            data: iconData,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [130, 30],
            symbolOffset: [0, -2],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#14b1eb",
                borderType: "solid",
                borderWidth: 5,
              },
            },
            data: iconData,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [100, 25],
            symbolOffset: [0, -5],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: "#14b1eb",
                borderType: "solid",
                borderWidth: 5,
              },
            },
            data: iconData,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [50, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: "rgb(9,227,255)",
              },
            },
            data: iconData,
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgb(24,118,158)",
                    },
                    {
                      offset: 1,
                      color: "rgba(9,30,41,0.5)", //底部渐变颜色
                    },
                  ],
                },
              },
            },
            silent: true,
            barWidth: 50,
            barGap: "-100%", // Make series be overlap
            data: data,
            label: {
              show: true,
              position: "top",
              distance: 5,
              color: "#fff",
              fontSize: 12,
              formatter: (params) => {
                // console.log(params)
                return (
                  "{a|" +
                  params.value +
                  "}" +
                  "人" +
                  "\n" +
                  "{b|" +
                  percent[params.dataIndex] +
                  "%}"
                );
              },
              rich: {
                a: {
                  color: "#03adff",
                  fontSize: 18,
                  fontWeight: "bold",
                },
                b: {
                  color: "#fff",
                  fontSize: 16,
                  marginTop: 15,
                },
              },
            },
            markPoint: {
              data: imgList,
            },
          },
        ],
      };
      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
  });
})();
